<template>
	<view class="con">
		<view class="info" v-for="(item, index) in dataObject.lists" :key="index" @click="clickToItem(item)">
			<view class="info_img">
				<image class="image" :src="item.thumbnail||item.cover" mode=""></image>
			</view>
			<text class="toplist_name_text">{{ item.name }}</text>
		</view>
	</view>
</template>
<script>
	import tools from '@/utils/tools.js'
	export default {
		data() {
			return{
			}
		},
		props:{
			// jump_type: 1:我的  2:任务  3:排行  4:追剧
			dataObject: {
				type: Object,
				default: function(){
					return []
				}
			},
		},
		methods: {
			clickToItem(res) {
				console.log(res.jump_type);
				switch (res.jump_type){
					case 4:
					uni.switchTab({
						url:'/pages/tabBar/chase/chase'
					})
						break;
					case 3:
					uni.navigateTo({
						url:'/pages/rank/rank'
					})
						break;
					case 2:
					tools.navigateToWelfare()
						break;
					case 1:
					uni.switchTab({
						url:'/pages/tabBar/mine/mine'
					})
						break;
					default:
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.con{
		display: flex;
		box-sizing: border-box; //盒子模型不撑开容器本身大小
		flex-direction: row;//横向排列
		flex-wrap: wrap; //换行排列
		padding: 0px 10px;//第一个值上下 第二个值左右
		margin-bottom: 18px;
		// background-color: green;
		
		.info{
			width: 25%;
			display: flex;
			box-sizing: border-box;
			flex-direction: column;
			// background-color: blue;
			
			.info_img{
				flex-shrink: 0;
				margin: 5px auto;
				width: 90rpx;
				height: 90rpx;
				// background-color: orange;
				.image{
					width: 100%;
					height: 100%;
				}
			}
			.toplist_name_text{
				width: 100%;
				font-size: 14px;
				text-align: center;
				white-space: nowrap; 
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
</style>